/*
* @Author: 董洌淇
* @Date: 2020年10月20日14:20:57
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年10月20日14:21:06
* @Description: 全局地图公用组件
* latitude 中心纬度
* longitude 中心经度
* scale 缩放级别，取值范围为5-18
* markers 标记点 
* show-location 显示带有方向的当前定位点
*/
<template>
	<view class="amap-box">
		<map
			id="map"
			class="map-style"
			:latitude="center.latitude"
			:longitude="center.longitude"
			:scale="zoom"
			:markers="markers"
			:polyline="polyline"
			@markertap="markertap"
			@tap='tap'
			:show-location="true">
		</map>
	</view>
</template>

<script>
	import amap from '@/AMapWX_SDK_V1.2.1/amap-wx.js'
	import MAP_BORDER from '@/components/map/mapInfor'
	export default {
		name: 'amap',
		props: {
			center: { // 地图中心点
				type: Object,
				default () {
					return {}
				}
			},
			markersData: { // 锚点列表
				type: Array,
				default () {
					return []
				}
			},
			regionalBoundary: { // 区域边界  true 展示  false 不展示
				type: Boolean,
				default: false
			},
			zoom: { // 地图缩放等级
				type: Number,
				default: 13
			}
		},
		data() {
			return {
				mapKey: '040c23945bc47971d5fa8225f9780eb5', // 地图key
				amapPlugin: null, // 地图实体
				polyline: [] // 行政区域边界 - 使用画线完成
			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({ // 初始化地图
				key: this.mapKey  // 高德中申请的key
			})
			// this.amapPlugin.getRegeo({
			// 	type: 'gcj02', // 国测局经纬度
			// 	success: (res) => {
			// 		console.log(res, '成功')
			// 	},
			// 	fail: (err) => {
			// 		console.log(err, '错误')
			// 	}
			// })
		},
		computed: {
			markers () {
				return this.markersData
			}
		},
		mounted () {
			this.$nextTick(() => {
				if (this.regionalBoundary) { // 区域边界
					let mapBorderConfig = {
						points: [{longitude: 103.6707, latitude: 30.611732}],
						color: '#418BFF',
						width: 8,
						dottedLine: true
					}
					for (let str of MAP_BORDER.map_border_arr.split(';')) {
						mapBorderConfig.points.push({longitude: str.split(',')[0], latitude: str.split(',')[1]})
						this.polyline.push(mapBorderConfig)
					}
				}
			})
		},
		methods: {
			//点击地图触发
			tap (e) {
				this.$emit('tapClick', e)
			},
			// 点击锚点获取当前锚点详情
			markertap (e) {
				this.$emit('clickMarkertap', e)
			},
			// 点击居中按钮，回到中心点位置
			goCenter () {
				uni.createMapContext("map", this).moveToLocation({
					longitude: this.center.longitude,
					latitude: this.center.latitude
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.amap-box {
		width: 100%;
		height: 100%;
		.map-style {
			width: 100%;
			height: 100%;
		}
	}
</style>
